<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-md12  layui-form-pane">
                        <div class="layui-form-item" id="start">
                            <label class="layui-form-label">城市联动</label>
                            <div class="layui-input-inline">
                                <select class="pro" name="province" lay-filter="province">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select class="cit" name="city" lay-filter="city">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select class="are" name="area" lay-filter="area">
                                    <option value="">请选择县/区</option>
                                </select>
                            </div>
                            <div class="layui-input-inline layui-show-xs-block">
                                <button onclick="getCity()" class="layui-btn" lay-submit="" lay-filter="sreach">
                                    <i class="layui-icon">&#xe615;</i></button>
                            </div>
                        </div>


                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table" id="test" lay-filter="idTest"
                           lay-data="{toolbar: '#toolbarDemo',id:'Test'}"></table>
                </div>
            </div>
            <hr>

        </div>
    </div>
</div>
</div>
<script>
    function getCity() {
        var pro = $(".pro").find("option:selected").text();
        var are = $(".are").find("option:selected").text();
        var cit = $(".cit").find("option:selected").text();

    }
</script>
<script>
    layui.use(['table', 'laydate'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
        table.render({
            elem: '#test'
            , url: '/shop/findShopByPage'
            , toolbar: true
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , cols: [[
                {checkbox: true, fixed: true}
                , {
                    field: 'shopId',
                    title: 'ID',
                    width: 60,
                    fixed: 'left',
                    unresize: true,
                    sort: true,
                    totalRowText: '合计行'
                }
                , {field: 'orderId', title: '订单号', width: 80, edit: 'text'}
                , {field: 'receiverProvince', title: '收货省', width: 100, edit: 'text'}
                , {field: 'receiverCity', title: '收货市', width: 120, sort: true, totalRow: true}
                , {field: 'receiverRegion', title: '收货区', width: 140, edit: 'text', sort: true}
                , {field: 'orderStatus', title: '订单状态', width: 140, sort: true, totalRow: true}
                , {field: 'shippingStatus', title: '配送状态', width: 140, sort: true, totalRow: true}
                , {field: 'distribution', title: '配送方式', width: 140, sort: true, totalRow: true}
                , {field: 'createdTime', title: '创建日期', width: 140, sort: true, totalRow: true}
                , {field: 'modifiedTime', title: '更新日期', width: 140, sort: true, totalRow: true}
                , {fixed: 'right', width: 260, align: 'center', toolbar: '#barDemo'}
            ]]
            , page: true
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 200 //规定成功的状态码，默认：0
                , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                , countName: 'count' //规定数据总数的字段名称，默认：count
                , dataName: 'data' //规定数据列表的字段名称，默认：data
            }

        });
        //监听工具条
        table.on('tool(idTest)', function (data) {//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            debugger
            var data = data.data//获得当前行数据
            var id = data['id'];  //获取属性uid的值
            alert(id);
            if (data.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (data.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    data.del();
                    layer.close(index);
                });
            } else if (data.event === 'edit') {

                layer.alert('编辑行：<br>' + JSON.stringify(data))
            }
        });
        // 监听单元格编辑
        table.on('edit(test)', function (data) {
            var value = data.value //得到修改后的值
                , data = data.data //得到所在行所有键值
                , field = data.field; //得到字段
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
        });
        //监听表格复选框选择
        table.on('checkbox(idTest)', function (data) {
            debugger
            console.log(data)
        });
        //头工具栏事件
        var $ = layui.$, active = {
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('Test')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , getCheckLength: function () { //获取选中数目
                var checkStatus = table.checkStatus('Test')
                    , data = checkStatus.data;
                layer.msg('选中了：' + data.length + ' 个');
            }
            , isAll: function () { //验证是否全选
                var checkStatus = table.checkStatus('Test');
                layer.msg(checkStatus.isAll ? '全选' : '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // table.on('toolbar(#toolbarDemo)', function(obj) {
        //     var checkStatus = table.checkStatus(obj.config.id);
        //     switch (obj.event) {
        //     case 'getCheckData':
        //         var data = checkStatus.data;
        //         layer.alert(JSON.stringify(data));
        //         break;
        //     case 'getCheckLength':
        //         var data = checkStatus.data;
        //         layer.msg('选中了：' + data.length + ' 个');
        //         break;
        //     case 'isAll':
        //         layer.msg(checkStatus.isAll ? '全选': '未全选');
        //         break;
        //     };
        // });

    });

    /*用户-删除*/
    function member_del(data, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $(data).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    function delAll(argument) {
        var ids = [];
        // 获取选中的id
        $('tbody input').each(function (index, el) {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });
        layer.confirm('确认要发货吗？' + ids.toString(), function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('发货成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }

    /*用户-停用*/
    function member_stop(data, id) {
        layer.confirm('确认要发货吗？', function (index) {

            if ($(data).attr('title') == '发货') {

                //发异步把用户状态进行更改
                $(data).attr('title', '发货')
                $(data).find('i').html('&#xe62f;');

                $(data).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已发货!', {icon: 5, time: 1000});

            } else {
                $(data).attr('title', '发货')
                $(data).find('i').html('&#xe601;');

                $(data).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已发货!', {icon: 5, time: 1000});
            }

        });
    }
</script>
<script type="text/html" id="barDemo" lay-data="">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除" onclick="member_del(this,'要删除的id')"
       href="javascript:;">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-mini" onclick="member_stop(this,'10001')" href="javascript:;"
       title="发货">
        <i class="layui-icon"></i>发货
    </a>
</script>
<script type="text/javascript" src="./js/xcity.js"></script>
<script>
    layui.use(['form', 'code'], function () {
        form = layui.form;

        layui.code();

        $('#start').xcity();

        $('#end').xcity('广东', '广州市', '东山区');

    });
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>
</html>